<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>常用组件</title>
		<link rel="stylesheet" type="text/css" href="css/button.css" />
		<link rel="stylesheet" type="text/css" href="css/table.css" />
		<link rel="stylesheet" type="text/css" href="css/radio.css" />
		<link rel="stylesheet" type="text/css" href="css/tgButton.css" />
		<style type="text/css">
			.w500 {
				width: 500px;
			}
			
			.pd10 {
				padding: 10px;
			}
			
			.mt5 {
				margin-top: 5px;
			}
		</style>
	</head>

	<body>

		<div class="pd10">
			<input class="btn btn-default" type="button" value="默认">
			<input class="btn btn-default radius" type="button" value="圆角效果">
			<input class="btn btn-default round" type="button" value="椭圆效果">
			<input class="btn btn-primary radius" type="button" value="主要">
			<input class="btn radius btn-secondary" type="button" value="次要">
			<input class="btn btn-success radius" type="button" value="成功">
			<input class="btn radius btn-warning" type="button" value="警告">
			<input class="btn btn-danger radius" type="button" value="危险">
			<input class="btn btn-link radius" type="button" value="链接">
			<input class="btn disabled radius" type="button" value="禁用">
		</div>

		<div class="pd10">

			<table class="table table-border table-bg table-bordered w500">
				<thead>
					<tr>
						<th width="20%">Class</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th>.active</th>
						<td>悬停在行</td>
					</tr>
					<tr>
						<th>.success</th>
						<td>成功或积极</td>
					</tr>
					<tr>
						<th>.warning</th>
						<td>警告或出错</td>
					</tr>
					<tr>
						<th>.danger</th>
						<td>危险</td>
					</tr>
				</tbody>
			</table>

		</div>

		<div class="pd10">

			<table class="table table-border table-bordered w500">
				<thead>
					<tr>
						<th width="20%">Class</th>
						<th>描述</th>
					</tr>
				</thead>
				<tbody>
					<tr class="active">
						<th>.active</th>
						<td>悬停在行</td>
					</tr>
					<tr class="success">
						<th>.success</th>
						<td>成功或积极</td>
					</tr>
					<tr class="warning">
						<th>.warning</th>
						<td>警告或出错</td>
					</tr>
					<tr class="danger">
						<th>.danger</th>
						<td>危险</td>
					</tr>
				</tbody>
			</table>

		</div>

		<div class="pd10">
			<div style="font-size: 18px;padding-bottom: 5px;">今年谁会是总冠军？</div>
			<label for="ww">
				<input id="ww" type="radio" name="test1" value="1" checked="checked"/>
				<span class="radio-inner">骑士</span>			
			</label>
			<label for="ee">
				<input id="ee" type="radio" name="test1" value="2"/>
				<span class="radio-inner">勇士</span>
			</label>

		</div>

		<div class="pd10">
			<div style="font-size: 18px;padding-bottom: 5px;">好看的开关按钮</div>
			<span class='tg-list-item'> 
				<input class='tgl tgl-light' id='cb1' type='checkbox'> 
					<label class='tgl-btn' style="display: inline-block;" for='cb1'></label> 
			</span>
			<span class='tg-list-item'> 
				<input class='tgl tgl-ios' id='cb2' type='checkbox'> 
					<label class='tgl-btn' style="display: inline-block;" for='cb2'></label> 
			</span>
			<span class='tg-list-item'> 
				<input class='tgl tgl-skewed' id='cb3' type='checkbox'> 
					<label class='tgl-btn' style="display: inline-block;" data-tg-off='OFF' data-tg-on='ON' for='cb3'></label> 
			</span>
			<span class='tg-list-item'> 
				<input class='tgl tgl-flat' id='cb4' type='checkbox'> 
					<label class='tgl-btn' style="display: inline-block;" for='cb4'></label> 
			</span>
			<!--<span class='tg-list-item'> 
				<input class='tgl tgl-flip' id='cb5' type='checkbox'> 
					<label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label> 
			</span>-->

		</div>

	</body>

</html>